<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/body.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    
<div class="head-note">风险提示：近期有不法分子以商品质量为由，致电客户主动要求退款，套取卡号及密码，诈骗钱财，请您保持警惕，保护好个人信息，谨防诈骗。</div>

<!-- 顶部     -->
<div class="head-top-wrap">
    <div class="head-top"> 

        <div class="top-left">
            <a href="//www.ule.com/" target="_blank">邮乐首页</a>
        </div>

        <div class="top-right">
            <div class="welcome">您好，欢迎来到邮乐网！</div>
            <div class="login">
                <a href="" class="blue">[请登录]</a>
                <a href="" class="blue">[免费注册]</a>
            </div>

            <div class="myul menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">我的邮乐</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="###" target="_blank" class="menu-item">我的订单</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的收藏</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的消息</a></li>
                </ul>
            </div>

            <div class="ulephone menu dropdown" data-active="menu">
                <span class="ico-phone"></span>
                <a class="txt-down dropdown-toggle" target="_blank">手机邮乐</a>
                <div class="uleapp dropdown-layer dropdown-left">
                    <div class="img-wrap">
                        <img src="images/uleapp.jpeg" alt="手机邮乐">
                    </div>
                </div>
            </div>

            <!-- 全部商品分类 -->
            <div class="category">
                <span class="icon_list"></span>
                <a href="" target="_blank">全部商品分类</a>
            </div>
            <div class="allCategory" id="allCategory" >
                <div class="allCategory_box">
                    <ul class="allCategory_main clear">
                    <li>
                        <h4> 
                            <a>美妆洗护</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>美发护发</a><a>面部护肤</a><a>女性护理</a><a>香水彩妆</a><a>口腔护理</a><a>香水</a><a>身体护理</a><a>洗浴用品</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>女装、饰品、配件</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>帽子</a><a>衬衫</a><a>连衣裙</a><a>针织衫毛衣</a>
                            <a>短外套</a>
                            <a>文胸</a>
                            <a>女袜</a>
                            <a>丝巾/围巾/手套</a>
                            <a>镶嵌饰品</a>
                            <a>金银饰品</a>
                            <a>戒指</a>
                            <a>耳饰</a>
                            <a>项链</a>
                            <a>手镯手链</a>
                            <a>头饰/胸针</a>
                            <a>太阳镜/眼镜框</a>
                            <a>手表</a>
                            <a>女士腰带</a>
                            <a>男士腰带</a>
                            <a>T恤</a>
                            <a>打底衫</a>
                            <a>卫衣</a>
                            <a>小西装</a>
                            <a>风衣/大衣</a>
                            <a>羽绒服</a>
                            <a>牛仔裤</a>
                            <a>休闲裤</a>
                            <a>打底裤/短裤</a>
                            <a>半裙</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>女士内裤</a>
                            <a>吊带/背心</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>家居生活</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>家纺</a>
                            <a>生活日用</a>
                            <a>家纺日用</a>
                            <a>家居用品</a>
                            <a>五金装潢</a>
                            <a>家装建材</a>
                            </p>
                        </li>
                        <li>
                            <h4> 
                                <a>汽车用品</a> 
                                <a class="more">more</a> 
                            </h4>
                            <p>
                                <a>行车记录仪</a>
                                <a>润滑油</a>
                                <a>座垫/座套</a>
                                <a>维修配件</a>
                                <a>内饰</a>
                                <a>脚垫</a>
                                <a>除味</a>
                                <a>美容</a>
                                <a>添加剂</a>
                                <a>4S服务</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>特色美食</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>休闲零食</a>
                            <a>饮料冲调</a>
                            <a>冲调食品</a>
                            <a>厨房调料</a>
                            <a>酒</a>
                            <a>特供礼盒</a>
                            <a>进口食品</a>
                            <a>营养滋补</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>魅力男装</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>衬衫</a>
                            <a>T恤/POLO衫</a>
                            <a>牛仔裤</a>
                            <a>夹克/外套</a>
                            <a>男士内裤</a>
                            <a>休闲裤</a>
                            <a>西装</a>
                            <a>棉服</a>
                            <a>羽绒服</a>
                            <a>西裤</a>
                            <a>针织衫</a>
                            <a>毛背心</a>
                            <a>卫衣</a>
                            <a>大衣/皮衣</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>男袜</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>厨房清洁</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>清洁剂</a>
                            <a>清洁工具</a>
                            <a>一次性用品</a>
                            <a>锅具水壶</a>
                            <a>精美餐具</a>
                            <a>生活用纸</a>
                            <a>厨具</a>
                            <a>水具酒具</a>
                            <a>浴室用品</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>手机数码</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>手机通讯</a>
                            <a>手机配件</a>
                            <a>摄影摄像</a>
                            <a>数码配件</a>
                            <a>数码影音</a>
                            <a>智能设备</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>进口食品</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>进口乳制品</a>
                            <a>进口饼干糕点</a>
                            <a>进口糖果/巧克力</a>
                            <a>进口果干/蜜饯</a>
                            <a>进口食用油</a>
                            <a>进口冲饮/早餐谷物</a>
                            <a>进口冲饮咖啡/茶</a>
                            <a>进口饮用水/饮料</a>
                            <a>进口休闲零食</a>
                            <a>进口米/面</a>
                            <a>进口调味品</a>
                            <a>进口罐头</a>
                            <a>进口酒类</a>运动户外
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>箱包鞋帽</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>功能箱包</a>
                            <a>时尚女包</a>
                            <a>精品男包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>电脑办公</a> 
                            <a class="more">商务礼品</a> 
                        </h4>
                        <p>
                            <a>电脑整机</a>
                            <a>电脑硬件</a>
                            <a>外设产品</a>
                            <a>网络设备</a>
                            <a>游戏设备</a>
                            <a>办公设备</a>
                            <a>文具/耗材</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>家用电器</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>个人护理电器</a>
                            <a>厨房电器</a>
                            <a>生活电器</a>
                            <a>大家电</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>保健品</a>  
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>增强免疫力/抗疲劳</a>
                            <a>减肥瘦身</a>
                            <a>调节血压/血脂/血糖 </a>
                            <a>养生参茸食材 </a>
                            <a>美容养颜 </a>
                            <a>男/女性调养 </a>
                            <a>儿童营养 </a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>运动户外</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>母婴玩具</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                                <a>奶粉</a>
                                <a>尿裤湿巾</a>
                                <a>玩具书籍</a>
                                <a>哺喂用品</a>
                                <a>洗护用品</a>
                                <a>宝宝服饰</a>
                                <a>儿童服饰</a>
                                <a>童车童床</a>
                                <a>妈妈用品</a>
                                <a>出行用品</a>
                                <a>图书音像</a>
                        </p>
                    </li>
                </ul>
                <p class="allCategory_side">
                    <a >邮乐农品</a>
                    <a class="s2">手机充值</a>
                    <a>生活缴费</a>
                    <a class="s2">海外馆</a>
                </p>
                </div>
            </div>

            <div class="web-map">
                <a href="" target="_blank">网站地图</a>
            </div>

            <div class="helpcenter menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">帮助中心</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="" target="_blank" class="menu-item">购物指南</a></li>
                    <li><a href="" target="_blank" class="menu-item">支付帮助</a></li>
                    <li><a href="" target="_blank" class="menu-item">配送方式</a></li>
                    <li><a href="" target="_blank" class="menu-item">售后服务</a></li>
                    <li><a href="" target="_blank" class="menu-item">关于邮乐</a></li>
                </ul>
            </div> 

            <div class="telphone">
                <span class="phone">11185</span>
                <p class="phonetips"></p>
            </div>
        </div>
    </div>
</div>

<!-- 头部 -->
<div class="login-header">
    <div class="header">
        <div class="head-logo">
            <a href="" class="logo-ule">邮乐网</a>
        </div>
    </div>
</div>

<!-- 登录 -->
<div class="login-body-wrap">
    <div class="login-body">
        <form class="login-form">
            <span class="box-title">登录</span>
            <div class="login-main">
                <!-- 用户名 -->
                <div class="user-login">
                    <input type="text" id="username" class="username" name="userName" placeholder="请输入用户名">
                    <div class="user_error">输入错误</div>
                </div>
                <!-- 密码 -->
                <div class="code-login">
                    <div class="passInput">
                        <input type="text" id="password" class="password" name="personCode" value="" maxlength="10" placeholder="请输入密码">
                        <div class="pass_error">输入错误</div>
                    </div>
                </div>
                <!-- 记住密码 -->
                <input type="checkbox" id="remember">
                <label for="remember" id="rem">记住用户信息</label>
                <!-- 条款 -->
                <div class="autologin isAgreement">
                    <div class="argument-con">
                        <input type="checkbox" name="agreement" id="agreement"checked="checked" >
                         <label class="autotip" for="agreement">同意
                         <a>《邮乐用户协议》</a>
                         <a>《隐私权政策》</a>
                         <a>《积分授权及账户绑定条款》</a>
                         <a>《中国邮政会员服务协议》</a>
                         及其相关的条款和条件
                        </label>
                    </div>
                </div>
                <!-- 登录 -->
                <input type="button" value="立即登录"  id="login" class="login-btn">
                <span id="msg"></span>
            </div>
            <span class="no-account password-login"><em id="passwordLogin">使用账号密码登录</em></span>
            <!-- 底下 -->
            <div class="coop-site" id="openId">
                <span class="txt">您也可以使用以下合作网站帐号</span>
                <a href="###" class="pic-link1 sina"></a>
                <a href="###" class="pic-link2"></a>
                <a href="###" class="pic-link3 tom"></a> 
                <a href="###" class="pic-weixin" title="微信登录">
                    <img src="images/wxlgimg.jpg">
                    <b>微信登录</b>
                </a>
            </div>
        </form>
    </div>
</div>





<!-- 底部 -->
<div class="footer-wrap">
    <div class="footer">
        <div class="foot-banner">
            <a class="foot-banner-post">中国邮政</a>
            <a class="foot-banner-tom">TOM</a>
            <a class="foot-banner-commitment">品质保障 优选邮乐</a>
            <a class="foot-banner-free">覆盖城乡 安全速达</a>
        </div>

        <div class="foot-helper">
            
        </div>

        <div class="foot-license">
            <ul>
                <li>酒类商品零售许可证：浦市监酒零字 第 JY13101150070309-JL 号</li>
                <li>食品经营许可证：JY13101150070309</li>
                <li>统一社会信用代码：913100006916203638</li>
            </ul>
        </div>
        <div class="foot-copyright">
            <a style="color:#999">沪公网安备 31011502009005号</a>
            <span class="sep">|</span>
            沪ICP备 13037728号
            <span class="sep">|</span>
            (沪)网械平台备字[2020]第00009号
            <span class="sep">|</span>
            Copyright 2009-2020, 版权所有上海邮乐网络技术有限公司 ULE.COM
        </div>
        <div class="foot-iconlink">
            <a><b>中国邮政</b></a> 
            <a><b>TOM</b></a>
            <a><b>可信网站</b></a>
            <a><b>EMS</b></a>
            <a><b>中国邮政储蓄银行</b></a>
            <a><b>不良信息举报中心</b></a> 
            <a><b>上海网警网络110</b></a>
            <a><b>上海工商</b></a>
            <a><b>诚信网站</b></a>
        </div>

    </div>
</div>



<script src="js/jquery.2.2.4.js"></script>
<script src="js/drop-down menu.js"></script>
<script src="js/index.js"></script>
<script src="js/login.js"></script>


<script>

    // 读取记住的帐号信息
    let userMsg = localStorage.getItem("userMsg");
    userMsg = userMsg ? JSON.parse(userMsg) : {user:"",pass:""};
    $("#username").val(userMsg.user);
    $("#password").val(userMsg.pass);

    // 登录接口：http://localhost:8080/api?type=login&user=用户名&pass=密码

    $("#login").click(function(){
        $.ajax({
            url:"/api",
            data:{
                type:"login",
                user:$("#username").val(),
                pass:$("#password").val()
            },
            success:res=>{
                console.log(res);
                if(res.code === 200){ 
                    // 记住账号
                    if($("#remember")[0].checked){ 
                        localStorage.setItem("userMsg",JSON.stringify(res.data))
                    }
                    // 修改提示信息
                    $("#msg").html("登录成功，3秒后跳转到<a href='index.html'>首页</a>");
                    // 真实的跳转
                    // console.log(1);
                    setTimeout(() => {
                        location.href = "index.html";
                    }, 3000);

                    //登陆成功之后为了让其他页面拿到登录成功的状态，存起来
                    sessionStorage.setItem("userState",JSON.stringify(res.data))

                }else if(res.code === 404){
                    $("#msg").html("用户名不存在，请先<a href='register.html'>注册</a>");
                }else if(res.code === 400){
                    $("#msg").html("用户名密码不匹配，请重新输入");
                }
            },
            dataType:"json"
        })
    })




</script>

</body>
</html>